<template>
  <div class="pd10">
    <el-affix :offset="95">
      <div class="affix-container">
        <el-row>
          <el-col :span="8"><div class="line" @click="scrollToSection('section1')">基础信息</div></el-col>
          <el-col :span="8"><div class="line" @click="scrollToSection('section2')">销售信息</div></el-col>
          <el-col :span="8"><div @click="scrollToSection('section3')">更多信息</div></el-col>
        </el-row>
      </div>
    </el-affix>
    <el-form :model="form" label-width="100px" :rules="rules">
      <el-card id="section1" class="mt10">
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
          </div>
        </template>
        <el-form-item label="销售方式" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio :label="1">普通商品</el-radio>
            <el-radio :label="2">生鲜商品</el-radio>
            <el-radio :label="3">计件商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品条码" prop="barcode">
          <el-input
            v-model="form.barcode"
            placeholder="1-32个字符 支持数字和字母 特殊字符 '-'"
            clearable
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="1-50个字符支持中英文 数字 特殊符号"
            clearable
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="助记码" prop="mnemonicCode">
          <el-input v-model="form.mnemonicCode" placeholder="1-30个字符支持数字和字母" clearable style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" prop="category">
          <el-input v-model="form.category" placeholder="1-30个字符支持数字和字母" clearable style="width: 300px"></el-input>
        </el-form-item>
      </el-card>
      <el-card id="section2" class="mt10">
        <template #header>
          <div class="card-header">
            <span>销售信息</span>
          </div>
        </template>
        <el-form-item label="销售方式" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio :label="1">普通商品</el-radio>
            <el-radio :label="2">生鲜商品</el-radio>
            <el-radio :label="3">计件商品</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>
      <el-card id="section3" class="mt10">
        <template #header>
          <div class="card-header">
            <span>更多信息</span>
          </div>
        </template>
        <el-form-item label="销售方式" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio :label="1">普通商品</el-radio>
            <el-radio :label="2">生鲜商品</el-radio>
            <el-radio :label="3">计件商品</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="productAdd">
import { reactive } from "vue";

const scrollToSection = (sectionId: string) => {
  const section = document.getElementById(sectionId);
  if (section) {
    section.scrollIntoView({ behavior: "smooth" });
  }
};

const form = reactive({
  resource: 1,
  barcode: "",
  name: "",
  mnemonicCode: "",
  category: null
});

const rules = reactive({
  resource: [{ required: true, message: "请填选择销售方式" }],
  name: [{ required: true, message: "请填写商品名称" }]
});
</script>

<style lang="scss" scoped>
.affix-container {
  padding: 13px 0;
  font-size: 14px;
  color: rgb(153 153 153);
  text-align: center;
  cursor: pointer;
  background-color: white;
  box-shadow: rgb(0 0 0 / 12%) 0 1px 4px 0;
  .line {
    border-right: 1px solid rgb(223 227 233);
  }
}
</style>
